<template>
    <div>
        <Page class="points_box">
            <el-tabs v-model="data.activeName" @tab-click="handleClick">
                <el-tab-pane label="项目积分报表" name="projectPoints">
                    <ProjectPoints ref='projectPointsRef'/>
                </el-tab-pane>
                <el-tab-pane label="用户积分报表" name="userPoints">
                    <UserPoints ref='userPointsRef'/>
                </el-tab-pane>
            </el-tabs>
        </Page>
    </div>
</template>

<script setup>
    import { onActivated, reactive, ref } from 'vue';
    import Page from '../../components/Page.vue'
    import ProjectPoints from './components/projectPoints.vue'
    import UserPoints from './components/userPoints.vue'
    const data = reactive({
        activeName: 'projectPoints'
    })
    const projectPointsRef = ref()
    const userPointsRef = ref()
    onActivated(()=>{
        getList(data.activeName)
    })
    function handleClick(tab, event){
        getList(tab.name)
    }
    function getList(name){
        if(name == 'projectPoints'){
            projectPointsRef.value.search()
        }else if(name == 'userPoints'){
            userPointsRef.value.search()
        }
    }
</script>

<style scoped lang="scss">
    :deep .points_box{
        width: auto;
        margin: 16px;
        padding: 16px;
        background: #FFFFFF;
        box-shadow: 0px 4px 4px rgba(251, 229, 187, 0.1);
        border-radius: 12px;
        .header{
            display: none !important;
        }
        .el-tabs__header{
            margin-bottom: 20px;
        }
        .el-tabs__item{
            font-size: 18px;
        }
    }

    // 子 tab
    :deep .points{
        border: none;
        .header{
            display: none !important;
        }
        .search_box{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 20px;
            >div{
                margin-right: 10px;
            }
        }
        .el-card{
            margin: 0;
            border: none;
            border-radius: 0;
            .el-card__body{
                padding: 0;
            }
            .el-card__header{
                display: none;
            }
        }
    }

</style>